@(loginStaff:Map[String, Object]) @main(loginStaff) {

<div class="BreadcrumbSection">
	<ul class="ResetList FixFloat BreadcrumbList">
		<li class="Sprite1"><a href="#">Quản lý hệ thống</a></li>
		<li><span>Quản lý module</span></li>
	</ul>
</div>
<div class="CtnOneColSection">
	<div class="ContentSection">
		<div class="ToolBarSection">
			<div class="SearchSection GeneralSSection">
				<h2 class="Title2Style">Thông tin tìm kiếm</h2>
				<div class="SearchInSection SProduct1Form">
					<label class="LabelStyle Label1Style" >Mã chức năng</label>
					<input id="moduleCode" tabindex="1" type="text"  class="InputTextStyle InputText1Style" />
					<label class="LabelStyle Label1Style">Tên chức năng</label> 
					<input	type="text" tabindex="2" id="moduleName" class="InputTextStyle InputText1Style" />
					<label class="LabelStyle Label1Style">Trạng thái</label> 
					<div class="BoxSelect BoxSelect6">
						<select id="status" class="MySelectBoxClass">
							<option value="-2">Tất cả</option>
							<option value="1">Hoạt động</option>
							<option value="0">Tạm ngưng</option>
						</select>
					 </div>
					<div class="BtnCSection">
						<button tabindex="5" id="btnSearch" class="BtnGeneralStyle" style="height: 22px; font-size: 11px; padding: 0 10px !important; margin-left: 10px;" onclick="search()" >Tìm kiếm</button>
					</div>		
					<div class="Clear"></div>
					<p class="ErrorMsgStyle" style="display: none;" id="errMsg" />
					<div class="Clear"></div>
				</div>
				<h2 class="Title2Style">Danh sách chức năng</h2>
				<div class="GridSection">
					<table id="grid" ></table>
					<div class="Clear"></div>
				</div>
				<div class="GeneralForm ImportExcel1Form">
					<p class="ErrorMsgStyle" style="display: none;" id="zipErrorMsg" />
					<p class="SuccessMsgStyle" style="display: none" id="zipSuccessMsg" />
		       		<form action="/system/upload" name="importFrm" id="importFrm" method="post" enctype="multipart/form-data">
		                <div class="UploadFileSection Sprite1">
		                	<input id="fakefilepc" style="margin-left: 13px; width: 280px;" type="text" class="InputTextStyle InputText1Style">
		                    <input type="file" style="width: 304px;" class="UploadFileStyle" size="1" name="zipFile" id="zipFile" onchange="previewImportExcelFile(this,'importFrm');" />
		                </div>
					</form>
		            <div class="BtnCenterSection" style="float: left; margin-top: -5px; margin-left: 10px;">
		            	<button class="BtnGeneralStyle" onclick="uploadFile();">Tải lên</button>
		            </div>
		        </div>
				<div class="Clear"></div>
			</div>
			<div class="Clear"></div>
		</div>
	</div>
	<div class="Clear"></div>
</div>
<script type="text/javascript">
	$(document).ready(function() {
		$('.MySelectBoxClass').customStyle();
		$('#grid').datagrid({
			view: detailview,
			detailFormatter:function(index,row){
				return '<div style="padding:2px; width:'+($(window).width() - 235)+'px;"><table class="ddv" id="ddv-'+row.moduleId+'"></table></div>';
			},
			onExpandRow: function(index,row){
				var ddv = $('#ddv-'+row.moduleId);
				ddv.datagrid({
					url:'/system/list-module-staff',
					width: ddv.width() - 5,
					fitColumns:true,
					singleSelect:true,
					rownumbers:true,
					height:'auto',
					columns:[[
						{field:'staffCode', title:'Mã nhân viên', width:100, align:'left', formatter: function(v, r, idx){
							return Utils.XSSEncode(r.staff.staffCode);
						}},
						{field:'staffName', title:'Tên nhân viên', width:250, align:'left', formatter: function(v, r, idx){
							return Utils.XSSEncode(r.staff.name);	
						}},
						{field:'delete', title:'<a href="javascript:void(0)" onclick="dialogPickStaff2Module(\'ddv-'+row.moduleId+'\');"><img src="@routes.Assets.at("/resources/images/icon_add.png")"></a>', width:250, align:'left', formatter: function(v, r, idx){
							return '<a onclick="deleteStaffFromModule(\'ddv-'+row.moduleId+'\', '+row.moduleId+', '+r.staff.staffId+')" href="javascript:void(0)"><img src="/resources/images/icon-edit.png"></a>';	
						}}
					]],
					onResize:function(){
						$('#grid').datagrid('fixDetailRowHeight',index);
					},
					onLoadSuccess:function(){
						setTimeout(function(){
							$('#grid').datagrid('fixDetailRowHeight',index);
						},0);
					}
				});
				$('#grid').datagrid('fixDetailRowHeight',index);
			},
			url : '/system/list-module',
			width : $(window).width() - 35,
			scrollbarSize:0,
			fitColumns : true,
			singleSelect  :true,
			pagination : true,
		    rownumbers : true,
		    method : 'GET',
		    columns : [[
				{field:'moduleCode', title:'Mã chức năng', width:150, align:'left', formatter: function(value, row, index){
					return Utils.XSSEncode(value);
				}},
				{field:'moduleName', title:'Tên chức năng', width:250, align:'left', formatter: function(value, row, index){
					return Utils.XSSEncode(value);
				}},
				{field:'description', title:'Thông tin', width:450, align:'left', formatter: function(value, row, index){
					return Utils.XSSEncode(value);
				}},
				{field:'status', title:'Trạng thái', width:50, align:'center', formatter: function(value, row, index){
					var strStatus = 'Hoạt động';
					if(value == activeType.RUNNING || value == 1) {
						strStatus = 'Hoạt động';
					} else if(value == activeType.STOPPED || value == 0) {
						strStatus = 'Tạm ngưng';
					}
				}}
		    ]],
		    onLoadSuccess : function() {
		    	
		    }
		});
	});
	var search = function() {
		var moduleCode = $('#moduleCode').val();
		var moduleName = $('#moduleName').val();
		var status = $('#status').val();
		var obj = new Object();
		obj.moduleCode = moduleCode;
		obj.moduleName = moduleName;
		if(status == 1 || status == 0 || status == '1' || status == '0') {
			obj.status = status;			
		}
		$('#grid').datagrid(obj);
	};
	var dialogPickStaff2Module = function(ddv) {
		VTCommonJS.showDialogSearch2WithCheckbox({
			inputs : [
				{id:'staffCode', maxlength:50, label:'Mã NV'},
				{id:'staffName', maxlength:250, label:'Tên NV'}
			],
			chooseCallback : function(listId) {
				
			},
			url : '/system/search-staff',
			columns : [[
				{field:'staffCode', title:'Mã NV', align:'left', width: 110, sortable:false, resizable:false},
				{field:'staffName', title:'Tên NV', align:'left', width: 150, sortable:false, resizable:false},
				{field:'cb', checkbox:true, align:'center', width:80,sortable : false,resizable : false},
			]]
		});
	};
	var deleteStaffFromModule = function(ddv, moduleId, staffId) {
		
	};
	var previewImportExcelFile = function(fileObj,formId,inputText){
		$('#zipErrorMsg').html('').hide();
		$('#zipSuccessMsg').html('').hide();
		var inputId = 'fakefilepc';
		if(inputText != null || inputText != undefined){
			inputId = inputText;
		}
		var fileTypes=["zip"];
		if (fileObj.value != '') {
			if (!/(\.zip)$/i.test(fileObj.value)) {
				$('#zipErrorMsg').html('File import không phải là file zip, vui lòng chọn file khác').show();
				fileObj.value = '';
				fileObj.focus();
				document.getElementById(inputId).value ='';			
				return false;
			} else {
				$('#zipErrorMsg').html('').hide();
				var src = '';
				if ($.browser.msie){
				    var path = encodeURI(what.value);
				    path = path.replace("C:%5Cfakepath%5C","");
				    var path = decodeURI(path);
				    document.getElementById(inputId).value = path;
				}else{
					document.getElementById(inputId).value = fileObj.value;
				}	
				// $('#' + formId).submit();
				// return true;
			}
		}else{
			$('#zipErrorMsg').html('Vui lòng chọn file chức năng muốn import').show();		
			return false;
		}
		return true;
	};
	var beforeUploadZipFile = function() {
		
	};
	var afterImportZipFile = function(responseText, statusText, xhr, $form) {
		console.log(responseText);
	};
	var uploadFile = function() {
		var options = { 
				beforeSubmit: beforeUploadZipFile,   
		 		success:      afterImportZipFile, 
		 		type: "POST",
		 		dataType: 'html',
		 		data:({})
		 	}; 
		$('#importFrm').ajaxForm(options);
		$.messager.confirm('Xác nhận','Bạn có muốn import chức năng này không?',function(r){
			if(r){				
				$('#importFrm').submit();
			}
		});	
	};
</script>
}
